
import { Layout, Menu } from "antd"
import { Outlet } from "react-router-dom";
const { Header, Content, Footer } = Layout;
import './App.css'

function App() {
  return (
    <>
      <Layout style={{ height: '100%' }}>
        <Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            items={new Array(3).fill(null).map((_, index) => ({
              key: String(index + 1),
              label: `nav ${index + 1}`,
            }))}
          />
        </Header>
        <Content style={{ padding: '25px 50px' }}>
          <div style={{ padding: 24, height: '100%', backgroundColor: '#fff', overflow: 'auto' }}>
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    </>
  )
}

export default App
